<template>
  <div id="withFundInto">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="select-coin">
        <h4>币种</h4>
        <div>VC</div>
      </div>
      <div class="coin-type">
        <div class="point">
          <span class="lg-point blue-point"></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="lg-point"></span>
        </div>
        <div class="coin-option">
          <div>
            <b>从</b>
            <div>基金资产</div>
          </div>
          <div>
            <b>到</b>
            <span>可提资产</span>
          </div>
        </div>
      </div>
      <div class="num-coin">
        <h4>购买数量</h4>
        <div class="num-input">
          <div>
            <input type="text" placeholder="请输入购买数量" v-model="num" @keyup="keyUp" />
            <b>VC</b>
          </div>
          <span @click="num=amount">全部</span>
        </div>
      </div>
      <p>基金资产: {{amount}} VC</p>
     
      <div class="btn" @click="drawal">转出</div>
    </div>
    <van-popup
      v-model="showWithdrawal"
      position="bottom"
      round
      :style="{ height: '40%' }"
      class="withdrawalPop"
    >
      <div class="pop-title">选择资产</div>
      <div class="pop-con">
        <div class="list">
          <div class="item" @click="selectCoin(1)">理财资产</div>
          <div class="item" @click="selectCoin(2)">可提资产</div>
        </div>
      </div>
    </van-popup>
    <RootLoading v-show="rootLoading"></RootLoading>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Toast } from "vant";
import RootLoading from "@/components/rootLoading";
export default {
  data() {
    return {
      loginToken: "",
      userObj: {},
      rootLoading: false,
      type: 1,
      coin: "基金资产",
      showWithdrawal: false,
      amount: "0.00",
      num: "",
      coinType: "",
      coinType2: ""
    };
  },
  created() {
    this.changeTitle('转出');
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.userObj = localStorage.getItem("userObj")
      ? JSON.parse(localStorage.getItem("userObj"))
      : "";
    this.getUser();
  },
  components: { Header, RootLoading },
  computed: {
    //  ...mapState({})
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    keyUp() {
      this.num = this.num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      this.num = this.num.replace(/^\./g, ""); //验证第一个字符是数字而不是.
      this.num = this.num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      this.num = this.num
        .replace(/^0*/g,'')
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.num = this.num.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
    },
    getUser() {
      Services.getUser({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.userObj = res.user;
          localStorage.setItem("userObj", JSON.stringify(this.userObj));
          this.amount = this.userObj.vcFundAsset.toFixed(2);
        } else {
          Toast(res.msg);
        }
      });
    },
    selectCoin(type) {
      this.num = "";
      if (type == 1) {
        this.showWithdrawal = false;
        this.coin = "理财资产";
        this.amount = this.userObj.vcWithdrawAmount.toFixed(2);
      } else {
        this.showWithdrawal = false;
        this.coin = "可提资产";
        this.amount = this.userObj.cnnWithdrawAmount.toFixed(2);
      }
    },
    drawal() {
    //  fromType (2:vc可提,3:vc理财,5:cnn可用,8:vc基金资产)
    // toType (1:cnn可提，2:vc可提,8:vc基金资产)
      let that=this;
      let type=1;
      if (this.num == "" || this.num == 0) {
        Toast("请输入转出数量");
        return;
      }
      console.log(this.num, this.amount);
      if (this.num * 1 > this.amount * 1) {
        Toast("可转余额不足");
        return;
      }
      Services.transfer({
        token: this.loginToken,
        amount: this.num,
        fromType: 8,
        toType: 1
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          Toast("转出成功");
          this.getUser();
           setTimeout(function() {
                that.$router.go(-1);
           }, 2000);
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#withFundInto {
  height: 100%;
  // 提币弹窗
  .withdrawalPop {
    .pop-title {
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.26rem;
      font-weight: bold;
      border-bottom: 0.04rem solid #ececec;
    }
    .pop-con {
      background: #fefefe;
      height: calc(100% - 1.04rem);
      .list {
        padding: 0.1rem 0.5rem;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 1rem;
          font-size: 0.26rem;
          border-bottom: 1px solid #f3f3f3;
        }
      }
    }
  }
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow: auto;
    .topImg {
      height: 5.2rem;
      padding: 0;
      position: relative;
      > p {
        position: absolute;
        bottom: 0.5rem;
        margin: 0;
      }
    }
  }
  .select-coin {
    margin-top: 0.3rem;
    padding: 0 0 0 0.3rem;
    h4 {
      font-size: 0.26rem;
    }
    div {
      width: 100%;
      height: .8rem;
      line-height: .8rem;
      position: relative;
      border-bottom: 1px solid #eee;
      span {
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 0.3rem;
      }
      i {
        position: absolute;
        top: 0.35rem;
        right: 0.2rem;
      }
    }
  }
  .coin-type {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 95%;
    margin: 0.5rem auto;
    padding: 0.1rem 0.3rem;
    border: 1px solid #eee;
    border-radius: 0.14rem;
    .point {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      height: 1.1rem;
      span {
        width: 3px;
        height: 3px;
        background: #999;
        border-radius: 50%;
        &.lg-point {
          width: 5px;
          height: 5px;
          background: #fd6262;
        }
        &.blue-point {
          background: #1882d4;
        }
      }
    }
    .coin-option {
      margin-left: 0.3rem;
      flex: 1;
      div {
        height: 0.85rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        b {
          color: #999;
          margin-right: 0.3rem;
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
  .num-coin {
    margin-top: 0.3rem;
    padding: 0 0 0 0.3rem;
    h4 {
      font-size: 0.28rem;
    }
    .num-input {
      width: 100%;
      height: 1rem;
      position: relative;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      div {
        flex: 1;
        height: 0.75rem;
        border-right: 1px solid #eee;
        position: relative;
        input {
          border: none;
          width: 100%;
          height: 100%;
          background: transparent;
          margin: 0;
          padding: 0;
          ::-webkit-input-placeholder {
            color: #c5cfd5;
          }
        }
        b {
          padding-right: 0.3rem;
          top: 0;
          right: 0;
          height: 100%;
          display: flex;
          align-items: center;
          position: absolute;
        }
      }
      span {
        width: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.3rem;
      }
    }
  }
  p {
    padding: 0.1rem 0.3rem;
    font-size: 0.25rem;
    color: #333;
  }
  .tips {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    padding: 0.3rem;
    margin: 0.5rem auto 1rem;
    background: #f1f1f1;
    border-radius: 0.14rem;
    height: 1.5rem;
  }
  .btn {
    width: 95%;
    border-radius: 0.08rem;
    background: linear-gradient(to right, #43434e, #727181);
  }
}
</style>